import classNames from "classnames";
import { type FC } from "react";
import { useMemoizedFn, useUpdateEffect } from "ahooks";
import { produce } from "immer";
import { Radio, Switch } from "antd";
import contentStyle from '../../index.module.scss'
import styles from '../index.module.scss'
import { batchUpdateCustomization } from "../layout";
import DetailsSort from "./detailsSort";
import Spacing from "./spacing";
import Photo from "./photo";
import { useCustomizationStore, usePersonalDetailsStore } from "@/store";

interface IndexProps {

}

const Index: FC<IndexProps> = () => {
  const { updateHeader, addCustomization, customization } = useCustomizationStore(state => state, (o, n) => {
    return o.customization.header === n.customization.header && o.customization.layout.detailsPosition === n.customization.layout.detailsPosition
  })

  const { personalDetails } = usePersonalDetailsStore(state => state, (o, n) => {
    return o.personalDetails.id === n.personalDetails.id
  })

  const { header, layout } = customization
  const { showPosition, showDetailsPosition } = header || {}
  const run = (data) => {
    batchUpdateCustomization({
      updates: data,
      id: customization.id,
    })
  }
  const onChange = useMemoizedFn((key, v, changeLayout?) => {
    const data = produce(customization.header, (draft) => {
      if (key === 'position' || key === 'detailsArrangement') {
        if (changeLayout) {
          if (layout.detailsPosition !== 'top') {
            draft.detailsArrangement = 'column'
          }
          else {
            draft.detailsArrangement = 'wrap'
          }
        }
      }
      draft[key] = v
    })

    if (customization.id) {
      // const values = []
      // Object.keys(data).forEach((key) => {
      //   values.push({
      //     path: `header.${key}`,
      //     value: data[key],
      //   })
      // })
      if (changeLayout) {
        run([{
          path: `header.detailsArrangement`,
          value: data.detailsArrangement,
        }, {
          path: `header.${key}`,
          value: data[key],
        }])
      }
      else {
        run([{
          path: `header.${key}`,
          value: data[key],
        }])
      }
      run([{
        path: `header.${key}`,
        value: data[key],
      }])
    }
    else if (personalDetails.id && !changeLayout) {
      updateHeader(data)
      addCustomization(personalDetails.id)
      return
    }
    updateHeader(data)
  })
  // useUpdateEffect(() => {
  //   if (layout.detailsPosition !== 'top') {
  //     onChange('position', 'top', true)
  //   }
  //   if (layout.detailsPosition === 'top') {
  //     onChange('position', 'left', true)
  //   }
  // }, [layout.detailsPosition])
  return (
    <div className={classNames(styles.header, contentStyle.card)} >
      <h1 className={contentStyle.title} style={{ marginBottom: '30px' }}>个人详情

      </h1>
      {
        layout.detailsPosition === 'top'
          ? <>
            <h1 className={contentStyle.subtitle} style={{ marginBottom: '20px' }}>照片位置
              <Switch size='small' style={{ marginLeft: '20px' }} value={showPosition !== false} onChange={(e) => {
                onChange('showPosition', e)
              }}/>
            </h1>
            {
              showPosition !== false
                ? <div className={styles.columns}>
                  {
                    layout.detailsPosition === 'top'
                      ? <>

                        <div className={classNames(styles.columnItem, header.position === 'left' ? styles.active : '')} onClick={() => {
                          onChange('position', 'left')
                        }}>
                          <svg xmlns="http://www.w3.org/2000/svg" style={{ width: '45px' }} fill="currentColor" viewBox="0 0 92 26" ><path d="M26 13c0 7.18-5.82 13-13 13S0 20.18 0 13 5.82 0 13 0s13 5.82 13 13zM90 2H36a2 2 0 00-2 2v5a2 2 0 002 2h54a2 2 0 002-2V4a2 2 0 00-2-2zm0 13H36a2 2 0 00-2 2v5a2 2 0 002 2h54a2 2 0 002-2v-5a2 2 0 00-2-2z"></path></svg>
                        </div>
                        <div className={classNames(styles.columnItem, header.position === 'right' ? styles.active : '')} onClick={() => {
                          onChange('position', 'right')
                        }}>
                          <svg xmlns="http://www.w3.org/2000/svg" style={{ width: '45px' }} fill="currentColor" viewBox="0 0 92 26" ><path d="M92 13c0 7.18-5.82 13-13 13s-13-5.82-13-13S71.82 0 79 0s13 5.82 13 13zM56 2H2a2 2 0 00-2 2v5a2 2 0 002 2h54a2 2 0 002-2V4a2 2 0 00-2-2zm0 13H2a2 2 0 00-2 2v5a2 2 0 002 2h54a2 2 0 002-2v-5a2 2 0 00-2-2z"></path></svg>
                        </div>
                      </>
                      : null
                  }

                  <div className={classNames(styles.columnItem, header.position === 'top' ? styles.active : '')} onClick={() => {
                    onChange('position', 'top')
                  }}>
                    <svg xmlns="http://www.w3.org/2000/svg" style={{ width: '45px' }} fill="currentColor" viewBox="0 0 92 56" ><path d="M88.828 34H3.172C1.42 34 0 34.895 0 36v5c0 1.105 1.42 2 3.172 2h85.656C90.58 43 92 42.105 92 41v-5c0-1.105-1.42-2-3.172-2zm0 13H3.172C1.42 47 0 47.895 0 49v5c0 1.105 1.42 2 3.172 2h85.656C90.58 56 92 55.105 92 54v-5c0-1.105-1.42-2-3.172-2zM60 13c0 7.18-5.82 13-13 13s-13-5.82-13-13S39.82 0 47 0s13 5.82 13 13z"></path></svg>
                  </div>
                </div>
                : null
            }

            <h1 className={contentStyle.subtitle} style={{ margin: '30px 0 20px' }}>个人信息布局
              <Switch size='small' style={{ marginLeft: '20px' }} value={showDetailsPosition !== false} onChange={(e) => {
                onChange('showDetailsPosition', e)
              }}/>
            </h1>
            {
              showDetailsPosition !== false
                ? <div className={classNames(styles.columns, styles.details)}>
                  {
                    layout.detailsPosition === 'top'
                      ? <>
                        <div className={classNames(styles.columnItem, header.detailsArrangement === 'column' ? styles.active : '')} onClick={() => {
                          onChange('detailsArrangement', 'column')
                        }}>
                          <svg viewBox="0 0 39 24" style={{ width: '45px' }} fill="currentColor" xmlns="http://www.w3.org/2000/svg" ><rect width="39" height="6" rx="1"></rect><rect y="9" width="39" height="6" rx="1"></rect><rect y="18" width="39" height="6" rx="1"></rect></svg>
                        </div>
                        <div className={classNames(styles.columnItem, header.detailsArrangement === 'grid-2' ? styles.active : '')} onClick={() => {
                          onChange('detailsArrangement', 'grid-2')
                        }}>
                          <svg viewBox="0 0 83 24" style={{ width: '45px' }} fill="currentColor" xmlns="http://www.w3.org/2000/svg" ><rect width="39" height="6" rx="1"></rect><rect x="44" width="39" height="6" rx="1"></rect><rect y="9" width="39" height="6" rx="1"></rect><rect x="44" y="9" width="39" height="6" rx="1"></rect><rect x="44" y="18" width="39" height="6" rx="1"></rect><rect y="18" width="39" height="6" rx="1"></rect></svg>
                        </div>
                        <div className={classNames(styles.columnItem, header.detailsArrangement === 'grid-3' ? styles.active : '')} onClick={() => {
                          onChange('detailsArrangement', 'grid-3')
                        }}>
                          <svg viewBox="0 0 82 24" style={{ width: '45px' }} fill="currentColor" xmlns="http://www.w3.org/2000/svg" >
                            <rect width="24" height="6" rx="1"></rect>
                            <rect y="18" width="24" height="6" rx="1"></rect>
                            <rect x="29" width="24" height="6" rx="1"></rect>

                            <rect width="24" height="6" y="9" rx="1"></rect>
                            <rect x="29" y="9" width="24" height="6" rx="1"></rect>
                            <rect x="58" y="9" width="24" height="6" rx="1"></rect>

                            <rect x="29" y="18" width="24" height="6" rx="1"></rect>
                            <rect x="58" y="18" width="24" height="6" rx="1"></rect>
                            <rect x="58" width="24" height="6" rx="1"></rect>
                          </svg>

                        </div>
                        <div className={classNames(styles.columnItem, header.detailsArrangement === 'wrap' ? styles.active : '')} onClick={() => {
                          onChange('detailsArrangement', 'wrap')
                        }}>
                          <svg viewBox="0 0 82 24" style={{ width: '45px' }} fill="currentColor" xmlns="http://www.w3.org/2000/svg" ><rect y="9" width="39" height="6" rx="1"></rect><rect x="44" y="9" width="38" height="6" rx="1"></rect><rect width="24" height="6" rx="1"></rect><rect y="18" width="24" height="6" rx="1"></rect><rect x="29" width="24" height="6" rx="1"></rect><rect x="29" y="18" width="24" height="6" rx="1"></rect><rect x="58" y="18" width="24" height="6" rx="1"></rect><rect x="58" width="24" height="6" rx="1"></rect></svg>
                        </div>
                      </>
                      : null
                  }

                  {
                    layout.detailsPosition !== 'top'
                      ? <div className={classNames(styles.columnItem, header.detailsArrangement === 'column' ? styles.active : '')} onClick={() => {
                        onChange('detailsArrangement', 'column')
                      }}>
                        <svg viewBox="0 0 39 24" style={{ width: '45px' }} fill="currentColor" xmlns="http://www.w3.org/2000/svg" ><rect width="39" height="6" rx="1"></rect><rect y="9" width="39" height="6" rx="1"></rect><rect y="18" width="39" height="6" rx="1"></rect></svg>
                      </div>
                      : null
                  }
                </div>
                : null
            }

          </>
          : null
      }
      <Photo></Photo>
      <DetailsSort></DetailsSort>
      <Spacing></Spacing>

      <div style={{ margin: '20px 10px' }}>
        <Radio.Group onChange={(e) => {
          onChange('showLabel', e.target.value)
        }} value={header?.showLabel || false}>
          <Radio value={true}>展示标签</Radio>
          <Radio value={false}>隐藏标签</Radio>
        </Radio.Group>
      </div>

    </div>
  // : null;
  )
}

export default Index;
